<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab 2</title>
	<style type="text/css">
       *{
       	margin:0;
       	padding: 0;
       	list-style: none;
       	font-size: 12px;
       }

       .tab2{width:298px;height:98px;margin: 10px;border:1px solid #eee;overflow: hidden;}
       .tab2 .tab2-tit{height:27px;position: relative;background: #f7f7f7;}
       .tab2 ul{position: absolute;width:301px;left:-1px;}
       .tab2 ul li{float:left;width:58px;height:26px;line-height:26px;text-align:center;background:#fff;border-bottom:1px solid #eee;padding:0 1px;background: #f7f7f7;}

       .tab2 li.cur{border-bottom-color:#fff;border-left:1px solid #eee;border-right:1px solid #eee;padding:0;background:#fff;}

       .tab2 a:link,.tab2 a:visited{text-decoration:none;color:#000;}
       .tab2 a:hover{color:#f90;}

	</style>
</head>
<body>
	<div class="tab2">
		<div class="tab2-tit" id="tab2-tit">
			<ul>
				<li><a href="#">篮球</a></li>
				<li><a href="#">足球</a></li>
				<li><a href="#">钢琴</a></li>
				<li><a href="#">竖笛</a></li>
				<li class="cur"><a href="#">葫芦丝</a></li>
			</ul>
		</div>
		<div id="tab2-cont" class="tab2-cont">
			<div style="display:none;">1</div>
			<div style="display:none;">3</div>
			<div style="display:none;">5</div>
			<div style="display:none;">7</div>
			<div>9</div>
		</div>
	</div>
	<script type="text/javascript">
        function $(id){
        	return typeof id ==="string"?document.getElementById(id):id;
        }
        window.onload=function(){
            var titles = $("tab2-tit").getElementsByTagName("li"),
                conts = $("tab2-cont").getElementsByTagName("div");
            if(titles.length != conts.length)
            	return;
            for(var i=0;i<titles.length;i++){
            	titles[i].id=i,conts[i].id=i;
            	titles[i].onmouseover=function(){
            		for(var m=0;m<titles.length;m++){
            			titles[m].className="";
            			conts[m].style.display="none";
            		}
            		this.className="cur";
            		conts[this.id].style.display="block";
            	}
            }
        }
	</script>
</body>
</html>